<template>
  <el-dialog :title="dialogTitle" :visible.sync="handleDialog" :before-close="closeDialog" :close-on-click-modal="false" width="500px">
    <el-form :model="customForm" :rules="rules" ref="customForm">
      <el-form-item label="选择品类：" label-width="140px" prop="category_id">
        <el-cascader v-if="handleDialog" v-model="customForm.category_id" :options="cateList" :props="selectProps" :show-all-levels="false" @change="changeCascader" />
      </el-form-item>
      <el-form-item label="字段排序：" label-width="140px" prop="field_order">
        <el-input v-model="customForm.field_order" autocomplete="off" />
      </el-form-item>
      <el-form-item label="字段描述：" label-width="140px" prop="field_title">
        <el-input v-model="customForm.field_title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="字段类型：" label-width="140px" prop="field_type">
        <el-select v-model="customForm.field_type" placeholder="请选择">
          <el-option label="文本框" :value="1" />
          <el-option label="单选" :value="2" />
          <el-option label="多选" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="字段值：" label-width="140px" prop="field_val">
        <el-tag v-for="tag in tagsList" :key="tag" closable :disable-transitions="false" @close="closeTag(tag)">
          {{ tag }}
        </el-tag>
        <el-input v-if="inputVisible" v-model="inputValue" ref="saveTagInput" class="input-new-tag" size="small" @keyup.enter.native="tagInputConfirm" @blur="tagInputConfirm" />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加字段值</el-button>
      </el-form-item>
      <el-form-item label="必填项：" label-width="140px" prop="must_is">
        <el-radio-group v-model="customForm.must_is">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm('customForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    dialogTitle: {
      type: String,
      default: ''
    },
    isInputVisible: {
      type: Boolean,
      default: false
    },
    handleDialog: {
      type: Boolean,
      default: false
    },
    customForm: {
      type: Object,
      default: () => ({})
    },
    tagsList: {
      type: Array,
      default: () => []
    },
    cateList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    inputVisible: {
      get() {
        return this.isInputVisible
      },
      set(newVal) { }
    }
  },
  data() {
    var checkNum = (rule, value, callback) => {
      const reg = /^[0-9]\d*$/
      if (!value) {
        callback(new Error('请输入数字'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      inputValue: '',
      rules: {
        category_id: [
          { required: true, message: '请选择品类', trigger: 'change' },
        ],
        field_order: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        field_title: [
          { required: true, message: '请输入字段描述', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          },
        ],
        field_type: [
          { required: true, message: '请选择字段类型', trigger: 'change' }
        ],
        field_val: [
          { required: false, message: '请输入字段值', trigger: 'change' }
        ],
        must_is: [
          { required: true, message: '请选择必填项', trigger: 'change' }
        ],
      },
      selectProps: {
        label: 'name',
        value: 'id'
      }
    }
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submitForm', true)
        } else {
          return false
        }
      })
    },
    closeTag(tag) {
      this.$emit('closeTag', tag)
    },
    changeCascader(val) {
      if (val) {
        this.$emit('changeCascader', val[1])
      }
    },
    showInput(val) {
      this.$emit('showInput', val)
    },
    tagInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        if (this.tagsList.indexOf(inputValue) > -1) {
          this.$message.warning('不能重复添加')
        } else {
          this.tagsList.push(inputValue)
        }
      }
      this.inputVisible = false
      this.inputValue = ''
      this.$emit('tagInputConfirm', this.tagsList)
    }
  }
}
</script>

<style scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  color: #999;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
